<template>
  <div>
    <a-modal
      v-model="visible"
      title="添加分类"
      @cancel="closeModel"
      @ok="handleOk"
    >
      <a-form-model
        ref="addCate"
        :model="addCateForm"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-model-item label="分类名称" prop="cat_name">
          <a-input v-model="addCateForm.cat_name" placeholder="分类名称" />
        </a-form-model-item>
        <a-form-model-item label="父级分类">
          <a-tree-select
            @change="treeChange"
            tree-checkable
            labelInValue
            treeCheckStrictly
            v-model="selectedkeys"
            :selectable="false"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="parentCateList"
            :replaceFields="{
              title: 'cat_name',
              key: 'cat_id',
              children: 'children',
              value: 'cat_id',
            }"
          >
          </a-tree-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
// 引入网络请求
import { reqParentCateList, reqCate } from "@/api";
// import { TreeSelect } from "ant-design-vue";
// const SHOW_ALL = TreeSelect.SHOW_PARENT;

export default {
  data() {
    return {
      visible: false,
      //   储存表单数据
      addCateForm: {
        //分类名称
        cat_name: "",
        //   父级分类id
        cat_pid: 0,
        //分类的等级，默认1及分类
        cat_level: 0,
      },
      //验证规则
      rules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 1, max: 15, message: "用户名长度在1~15之间", trigger: "blur" },
        ],
      },
      // 父级分类列表
      parentCateList: [],
      //选中的id
      selectedkeys: [],
      // SHOW_ALL,
    };
  },
  created() {},
  methods: {
    // modal确定按钮
    handleOk(e) {
      this.$refs.addCate.validate(async (valid) => {
        if (!valid) return;
        let res = await reqCate(this.addCateForm);
        if (res.meta.status !== 201) {
          this.$message.warning("添加失败！");
        }
        this.$message.success("添加成功！");
        this.$emit("refiresh");
        this.visible = false;
        this.chongzhi();
      });
    },
    // 网络请求分类
    async getParentCateList() {
      let res = await reqParentCateList();
      if (res.meta.status !== 200) {
        this.$message.warn("获取数据失败！");
      }
      this.parentCateList = res.data || [];
    },
    // 复选框被选中时
    treeChange() {
      // console.log(this.selectedkeys);
      if (this.selectedkeys.length > 0) {
        this.addCateForm.cat_pid =
          this.selectedkeys[this.selectedkeys.length - 1].value;
        this.addCateForm.cat_level = this.selectedkeys.length;
      } else {
        this.addCateForm.cat_pid = 0;
        this.addCateForm.cat_level = 0;
      }
    },
    // 对话框关闭
    closeModel() {
      this.chongzhi();
    },
    //重置表单
    chongzhi() {
      this.$refs.addCate.resetFields();
      this.selectedkeys = [];
      this.addCateForm.cat_level = 0;
      this.addCateForm.cat_pid = 0;
    },
  },
};
</script>
